<!-- 销售业绩表 -->
<template>
  <div class="mod-config">
    <basic-container>
      <el-divider content-position="left">查询条件</el-divider>
      <el-form size="mini" label-width="80px">
        <el-row class="bg-row">
          <el-form-item label="查询分类">
            <el-radio-group v-model="spreadData.classify">
                <el-radio label="1">商品</el-radio>
                <el-radio label="2">配镜单</el-radio>
                <el-radio label="3">结款方式</el-radio>
              </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row class="bg-row">
          <el-form-item label="所属公司" v-if="[1,21,23].includes(userInfo.lessDeptId)">
            <el-select style="width: 175px;" v-model="spreadData.unitId" @change="unitChangeHandle">
              <el-option v-for="item in companyOption" :value="item.id" :label="item.name" :key='item.id'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属公司" v-else>
            <el-select style="width: 175px;" v-model="spreadData.unitId" disabled>
              <el-option v-for="item in companyOption" :value="item.id" :label="item.name" :key='item.id'></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="bg-row">
          <el-col :span="9">
            <el-form-item label="查询部门">
              <el-input style="width: 175px;" v-model="spreadData.deptName" v-if="userInfo.lessDeptId != '1' && userInfo.lessDeptId != '21' && userInfo.lessDeptId != '23'" disabled></el-input>
              <el-input type="textarea" v-model="spreadData.deptName" v-if="[1,21,23].includes(userInfo.lessDeptId)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label-width="0" v-if="[1,21,23].includes(userInfo.lessDeptId)">
              <el-button size="mini" @click="openDeptDialog">选择</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="查询日期">
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.beginTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center;">至</el-col>
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.endTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
          </el-col>
        </el-row>

        <!-- 商品 -->
        <div v-if="spreadData.classify == 1">
          <el-row class="bg-row">
            <el-col :span="12">
              <el-form-item label="分析角度">
                <el-radio-group v-model="spreadData.fxjd">
                    <el-radio label="1">按品种</el-radio>
                    <el-radio label="2">按商品</el-radio>
                    <el-radio label="3">按厂家</el-radio>
                  </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分组角度">
                <el-radio-group v-model="spreadData.fztj">
                    <el-radio label="1">按制造商和商品类型分组</el-radio>
                    <el-radio label="2">按商品类型分组</el-radio>
                  </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="bg-row">
            <el-form-item label="商品类别">
              <el-radio-group v-model="dataForm.ctgId">
                <el-radio label="0">全部</el-radio>
                <el-radio label="1">镜架</el-radio>
                <el-radio label="2">配件</el-radio>
                <el-radio label="3">镜片</el-radio>
                <el-radio label="4">隐形</el-radio>
                <el-radio label="5">护理液</el-radio>
                <el-radio label="6">太阳镜</el-radio>
                <el-radio label="7">耗材</el-radio>
                <el-radio label="8">老花镜</el-radio>
                <el-radio label="9">视光</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
        </div>

        <el-row class="bg-row" v-if="spreadData.classify != 3">
          <el-form-item label="配镜单状态">
            <el-radio-group v-model="dataForm.salesType">
                <el-radio label="1">全部</el-radio>
                <el-radio label="2">销售</el-radio>
                <el-radio label="3">退款</el-radio>
              </el-radio-group>
          </el-form-item>
        </el-row>

        <!-- 配镜单 -->
        <div v-if="spreadData.classify == 2">
          <el-row class="bg-row">
            <el-form-item label="销售类型">
              <el-checkbox-group v-model="dataForm.billType">
                <el-checkbox label="4">框镜成品</el-checkbox>
                <el-checkbox label="2">框镜订做</el-checkbox>
                <el-checkbox label="3">隐形成品</el-checkbox>
                <el-checkbox label="1">隐形订做</el-checkbox>
                <el-checkbox label="5">辅料</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <el-row class="bg-row">
            <el-form-item label="自架自片">
              <el-radio-group v-model="dataForm.iscontain">
                  <el-radio label="1">包括</el-radio>
                  <el-radio label="0">不包括</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-row>
<!--          <el-row class="bg-row">
            <el-form-item label="配镜单订金补齐状态" label-width="130px">
              <el-radio-group v-model="spreadData.paystatus">
                  <el-radio label="1">全部</el-radio>
                  <el-radio label="2">未欠款</el-radio>
                  <el-radio label="3">欠款</el-radio>
                  <el-radio label="4">全款</el-radio>
                  <el-radio label="5">订金</el-radio>
                  <el-radio label="6">补齐</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-row>-->
          <!--<el-row class="bg-row">
            <el-form-item label="查看方式">
              <el-radio-group v-model="spreadData.ShowType">
                  <el-radio label="1">汇总</el-radio>
                  <el-radio label="2">流水</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-row> -->
          <!-- <el-row class="bg-row">
            <el-form-item label="配镜单金额为0是否显示" label-width="120px">
              <el-radio-group v-model="spreadData.isSalesPrice">
                  <el-radio label="1">显示</el-radio>
                  <el-radio label="2">不显示</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-row> -->
          <el-row class="bg-row">
            <el-col :span="12">
              <el-form-item label="配镜单号">
                <el-input size="mini" v-model="dataForm.billId" style="width: 175px;"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="折扣率">
                <el-col :span="11">
                  <el-input size="mini" v-model="spreadData.bgnzk"></el-input>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center;">至</el-col>
                <el-col :span="11">
                  <el-input size="mini" v-model="spreadData.endzk"></el-input>
                </el-col>
              </el-form-item>
            </el-col> -->
          </el-row>
          <!-- <el-row class="bg-row">
            <el-col :span="12">
              <el-form-item label="是否使用套餐">
                <el-radio-group v-model="spreadData.issetmeal">
                  <el-radio label="1">全部</el-radio>
                  <el-radio label="2">是</el-radio>
                  <el-radio label="3">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="套餐名称">
                <el-input size="mini" v-model="spreadData.setmealName" style="width: 175px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- <el-row class="bg-row">
            <el-form-item label="套餐分类">
              <el-radio-group v-model="spreadData.setmealType">
                <el-radio label="1">全部</el-radio>
                <el-radio label="2">框镜</el-radio>
                <el-radio label="3">隐形</el-radio>
                <el-radio label="4">辅料</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row> -->
          <el-row class="bg-row">
            <el-form-item label="顾客卡号">
              <el-input size="mini" v-model="dataForm.customerId" style="width: 175px;"></el-input>
            </el-form-item>
          </el-row>
          <el-row class="bg-row">
            <el-col :span="12">
              <el-form-item label="顾客姓名">
                <el-input size="mini" v-model="dataForm.customerName" style="width: 175px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="顾客电话">
                <el-input size="mini" v-model="dataForm.customerPhone" style="width: 175px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="bg-row">
            <el-col :span="12">
              <el-form-item label="销售金额">
                <el-col :span="11">
                  <el-input size="mini" v-model="dataForm.startPrice"></el-input>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center;">至</el-col>
                <el-col :span="11">
                  <el-input size="mini" v-model="dataForm.endPrice"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="优惠金额">
                <el-col :span="11">
                  <el-input size="mini" v-model="dataForm.startDiscountPrice"></el-input>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center;">至</el-col>
                <el-col :span="11">
                  <el-input size="mini" v-model="dataForm.endDiscountPrice"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="bg-row">
            <el-col :span="12">
              <el-form-item label="营业员工号">
                <el-input size="mini" v-model="dataForm.salerUserId" style="width: 175px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收银员工号">
                <el-input size="mini" v-model="dataForm.payerUserId" style="width: 175px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row class="bg-row">
            <el-form-item label="配镜单显示信息">
              <el-radio-group v-model="spreadData.ordersTypeFlag">
                <el-radio label="1">销售类型</el-radio>
                <el-radio label="2">原价合计</el-radio>
                <el-radio label="3">优惠金额</el-radio>
                <el-radio label="4">应收金额</el-radio>
                <el-radio label="5">实收金额</el-radio>
                <el-radio label="6">积分</el-radio>
                <el-radio label="7">折扣率</el-radio>
                <el-radio label="8">来源</el-radio>
                <el-radio label="9">套餐名称</el-radio>
                <el-radio label="10">会员卡号</el-radio>
                <el-radio label="11">顾客姓名</el-radio>
                <el-radio label="12">顾客电话</el-radio>
                <el-radio label="13">验光师</el-radio>
                <el-radio label="14">营业员</el-radio>
                <el-radio label="15">收银员</el-radio>
                <el-radio label="16">收银日期</el-radio>
                <el-radio label="17">退款人</el-radio>
                <el-radio label="18">退款时间</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row> -->
          <el-row class="bg-row">
            <el-form-item label="商品类别">
              <el-radio-group v-model="dataForm.ctgId">
                <el-radio label="0">全部</el-radio>
                <el-radio label="1">镜架</el-radio>
                <el-radio label="2">配件</el-radio>
                <el-radio label="3">镜片</el-radio>
                <el-radio label="4">隐形</el-radio>
                <el-radio label="5">护理液</el-radio>
                <el-radio label="6">太阳镜</el-radio>
                <el-radio label="7">耗材</el-radio>
                <el-radio label="8">老花镜</el-radio>
                <el-radio label="9">视光</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <!--<el-row class="bg-row">
            <el-col :span="12">
              <el-form-item label="商品代码">
                <el-input size="mini" v-model="spreadData.goodsId" style="width: 175px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品名称">
                <el-input size="mini" v-model="spreadData.goodsName" style="width: 175px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
        </div>

        <!-- 结款方式 -->
        <div v-if="spreadData.classify == 3">
          <el-row class="bg-row">
            <el-col :span="12">
              <el-form-item label="结算方式显示">
                <el-radio-group v-model="spreadData.jsyhkFlag">
                  <el-radio label="1">现金</el-radio>
                  <el-radio label="2">银行卡</el-radio>
                  <el-radio label="3">积分</el-radio>
                  <el-radio label="4">储值卡</el-radio>
                  <el-radio label="5">代金券</el-radio>
                  <el-radio label="6">其他</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行卡和其他是否展开">
                <el-radio-group v-model="spreadData.isTongJi">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-row class="bg-row">
          <el-col :span="12">
            <el-form-item label="显示查询条件" label-width="100px">
              <el-radio-group v-model="spreadData.condition">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-form-item label-width="5px">
            <el-link  :href="printUrl" target="_blank" type="primary"><el-button size="mini" type="primary" @click="getWorkParams">查 询</el-button></el-link>
          </el-form-item>
        </el-row>
      </el-form>

      <!-- 弹窗，查询部门列表 -->
      <search-dept v-if="deptVisible" ref="deptDialog" @refreshData="getDeptData" :company="this.spreadData.unitId"></search-dept>
    </basic-container>
  </div>
</template>

<script>
  let params = ''
  import { filterParams } from '@/util/tools'
  import { getDateFormat } from '@/util/tools'
  import { mapGetters } from 'Vuex'
  import { unitList } from '@/api/admin/unit'
  import { getDeptPage } from '@/api/admin/dept'

  import SearchDept from '@/components/business/SearchDept'
  export default {
      data () {
        return {
          printUrl: '',
          companyOption: [],
          deptVisible: false,
          spreadData: {
            classify: '2',
            unitId: '',
            deptName: '',
            fxjd: '2',
            fztj: '1',

            billType: '1',
            iscontain: '1',
            ShowType: '1',
            isSalesPrice: '1',
            bgnzk: '',
            endzk: '',
            issetmeal: '',
            setmealName: '',
            setmealType: '',
            ordersTypeFlag: [1,2,3,4,5],
            goodsId: '',
            goodsName: '',
            jsyhkFlag: '1',
            isTongJi: '1',
            condition: '1'
          },
          dataForm: {

            deptId: '',
            ctgId: '0',

            beginTime: '',
            endTime: '',
            salesType: '1',
            billType: ['1','2','3','4','5'],
            iscontain: '1',
            billId: '',
            startPrice: '',
            endPrice: '',
            startDiscountPrice: '',
            endDiscountPrice: '',
            customerCard: '',
            customerName: '',
            customerPhone1: '',
            salerUserId: '',
            payerUserId: '',

          }
        };
      },
      computed: {
        ...mapGetters(['userInfo','bizData'])
      },
      components: {
        SearchDept
      },
      created() {
        this.dataForm.beginTime = getDateFormat(new Date())
        this.dataForm.endTime = getDateFormat(new Date())

        this.getCompanyList()
        this.spreadData.unitId = this.userInfo.unitId
        this.spreadData.deptId = [this.userInfo.lessDeptId]
        this.spreadData.deptName = this.userInfo.lessDeptName
      },
      methods:{
        //  查询公司列表
        getCompanyList() {
          unitList().then(result => {
            this.companyOption = result.data.data
          })
        },
        unitChangeHandle(val) {
          let ids = []
          let names = []
          getDeptPage({current: 1,size: 100,unitId: val}).then(result => {
            let resultData = result.data.data.records

            resultData.forEach(item => {
              ids.push(item.id)
              names.push(item.name)
            })
            this.spreadData.deptName = names.join(',')
            this.spreadData.deptId = ids
            this.dataForm.deptId = ids
          })
        },
        //  打开查询部门弹窗
        openDeptDialog() {
          this.deptVisible = true
          this.$nextTick(() => {
            this.$refs.deptDialog.init()
          })
        },
        //  获取选择部门数据
        getDeptData(data) {
          let ids = []
          let names = []
          if(data.length){
            data.forEach(item => {
              ids.push(item.id)
              names.push(item.name)
            })
          }
          this.spreadData.deptName = names.join(',')
          this.spreadData.deptId = ids
          this.dataForm.deptId = ids
        },

        getWorkParams() {
          if(this.spreadData.classify == '1'){
            if(this.spreadData.fxjd == '1'){
              params = '/sale/saleByBrandAll.cpt'
            }else if(this.spreadData.fxjd == '2'){
              params = '/sale/saleByGoodsAll.cpt'
            }else if(this.spreadData.fxjd == '3'){
              params = '/sale/saleBySupplyAll.cpt'
            }
          }else if(this.spreadData.classify == '2'){
            params = '/sale/salesList.cpt'
          }else if(this.spreadData.classify == '3'){
            params = '/sale/salesPay.cpt'
          }
          if(this.spreadData.deptId){
            this.dataForm.deptId=this.spreadData.deptId
          }
          if(this.dataForm.ctgId == '0'){
            this.dataForm.ctgId = ''
          }
          let data = filterParams(this.dataForm)
          let parameter = ''
          for(let key in data){
            parameter += '&' + key + '=' + this.dataForm[key]
          }
          //let parameter = '&deptId='+this.dataForm.deptId + '&beginTime='+this.dataForm.beginTime+ '&endTime='+this.dataForm.endTime
          this.printUrl = this.bizData.printUrl + params + parameter
        }
      }
    }
</script>

<style lang="scss" scoped>
  .bg-row {
    // background-color: #9ec0b0;
    padding-right: 15px;
    padding-top: 5px;
    margin-bottom: 2px;
  }
</style>
